<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="../../static/css/admin.css" media="all" />
</head>

<body class="tmm-modal-body">
<div class="layui-container">
  <form class="layui-form" action="">
    <div class="">新增产品：</div>
    <table class="layui-table" id="product_table">
      <colgroup>
        <col width="150">
        <col width="150">
        <col width="200">
        <col>
      </colgroup>
      <thead>
      <tr>
        <th width="65%">产品名称</th>
        <th width="35%">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr data-type="0">
        <td>
          <select id="name1" name="name1" class="layui-select" lay-verify="required" lay-filter="name1" lay-search>
            <option value="">产品名称</option>
            <c:forEach items="${goodsList}" var="goods">
              <option price="${goods.innerPrice}" categoryPid="${goods.categoryPid}" value="${goods.id}">${goods.name}</option>
            </c:forEach>
          </select>
        </td>
        <td>
          <a class="tmm-btn" data-type="switchCustom">自定义产品</a>
        </td>
      </tr>
      </tbody>
    </table>
  </form>
</div>

<div style="display: none;">
  <table id="product_template">
    <tr data-type="0">
      <td>
        <select id="name1" name="name1" class="layui-select" lay-verify="required" lay-filter="name1" lay-search>
          <option value="">产品名称</option>
          <c:forEach items="${goodsList}" var="goods">
            <option price="${goods.innerPrice}" categoryPid="${goods.categoryPid}" value="${goods.id}">${goods.name}</option>
          </c:forEach>
        </select>
      </td>
      <td>
        <a class="tmm-btn" data-type="switchCustom">自定义产品</a>
      </td>
    </tr>
    <tr data-type="1">
      <td>
        <div class="layui-input-inline">
          <div class="layui-inline">
            <select name="categoryPid" id="categoryPid" lay-filter="categoryPid">
              <option value="">一级类目</option>
              <c:forEach items="${categoryPid}" var="category">
                <option value="${category.id}">${category.name}</option>
              </c:forEach>
            </select>
          </div>
          <div class="layui-inline">
            <select name="doctorId" id="doctorId" lay-filter="doctorId">
              <option value="">选择医生</option>
              <c:forEach items="${doctorList}" var="doctor">
                <option value="${doctor.id}">${doctor.name}</option>
              </c:forEach>
            </select>
          </div>
          <div class="layui-inline">
            <input type="text" name="name3" id="name3" class="layui-input">
          </div>
        </div>
      </td>
      <td>
        <a class="tmm-btn" data-type="switchStandard">标准产品</a>
      </td>
    </tr>
  </table>
</div>
<script src="../../static/lib/layui/layui.js"></script>
<script>
    layui.config({
        base: "../../static/js/"
    }).extend({
        index: 'index'
    }).use(['index', 'form'], function () {
        var $ = layui.$,
            form = layui.form;

        window.getProducts = function() {
            var d = [{
                name: 'aaaaa',
                id: '2'
            }];
            return d;
        }

        var productOps = {
            switchStandard: function () {
                var d = $("#product_template tr[data-type='0']").clone(true);
                $(this).parents('tr').replaceWith(d);

                form.render('select');

                return false;
            },

            switchCustom: function () {
                var d = $("#product_template tr[data-type='1']").clone(true);
                $(this).parents('tr').replaceWith(d);

                form.render('select');

                return false;
            },
        };

        $("#product_table .tmm-btn").on("click", function () {
            var type = $(this).data("type");
            productOps[type] ? productOps[type].call(this) : "";
        });

        $("#product_template .tmm-btn").on("click", function () {
            var type = $(this).data("type");
            productOps[type] ? productOps[type].call(this) : "";
        });
    })
</script>
</body>

</html>